<template>
  <div class="container header">
    <My-header  :title="cname" >
       <span class="left"  @click="goclient()"><i class="icon icon-back" ></i></span>
    </My-header>

    <div class="content">
        <input type="radio" id="tab1" name="tabs" checked class="inp">
        <label for="tab1" class="lab"  >消费统计</label>
        <input type="radio" id="tab2" name="tabs" class="inp">
        <label for="tab2" >拜访记录</label>
        <!-- 消费统计@click="goxf()" -->
       <div id="content1" class="inp"  >
          <div class="chart">
          <div>
            <div id="main" style="width: 100%;height:15rem;"></div>
          </div>
        </div>  
       </div>
        <!-- 拜访记录 -->
        <div id="content2" class="inp">
          <div>
            <span class="btn bottom" @click="upload(cid,cname)">上传记录</span>
          </div>
          <ul class="todo-list">
            <li v-for="item of bflist" :key="item.id" >
              <div>
                <div class="info" >
                  <p>拜访人：{{item.sname}} <span class="fr">时间：{{item.insdate}}</span></p>
                  <p>说明：{{item.sm}} </p>
                  <p>地址：{{item.addr}} </p>
                  <div class="block"   v-for="i of item.picxs" :key="i.index" >
                    <img class="img" :src="ossimg+i" />
                  </div>
                
                </div>
              </div>
            </li>
          </ul>
            
        </div>
    </div>
    <Tabnav name="nav" />
  </div>
</template>

<script>
import Tabnav from "@/components/Tabnav.vue";
import MyHeader from "@/components/MyHeader.vue";
import Spinner from "@/components/Spinner.vue";
import { mapState } from "vuex";
import axios from "axios";
import * as echarts from 'echarts';

export default {
  name: "clientDetail",
  components: {
    MyHeader,
    Tabnav,
    Spinner
  },
  data(){
    return{
      pricelist: [],//销售记录，销售额
      datatime:[],//销售时间
      bflist:[],//拜访记录
      pageNo:0,
      // 是否在加载中
      isLoading: false,
      // 是否加载完成
      isLoaded: false,
      cname:'',
      cid:''
     

    }
    

  },
  computed: {
    ...mapState([ "userInfo" ,"ossimg"])
  },
  mounted(){
    this.getLishiPrice();
    this.queryBfjl();
    this.cname = this.$route.params.name;
    this.cid = this.$route.params.id;
  
  },
  methods: {
    //返回客户列表  
    goclient() {
      this.$router.push({ name: "client" });
    },
    godetail(name,id) {
      this.$router.push({ name: "clientDetail", params: { name,id } });
    },
    //上传记录
    upload(id,name) {
      this.$router.push({ name: "uploadBf", params: { id ,name} });
    },

    
    //查询拜访记录
    queryBfjl(){
      axios
        .get("/cust/custbf!ajaxlist.action", {
          params: {
            toUser: this.userInfo.toUser,
            sel_cid:this.$route.params.id
          }
        })
        .then(response => {
          this.bflist = response.data.list;
        
        
            response.data.list.forEach((item,i) => {
              if(item.pic==null||item.pic==''){
              }else{  
                item.picxs=item.pic.split(',');
              }
            });
         
        })
        .catch(function(error) {
          window.console.log(error);
        });
    },
   
    
    //折线图。获取日期，获取销售金额
    getLishiPrice(){
       axios
        .get("/order/order!tjOrder.action", {
          params: {
            toUser: this.userInfo.toUser,
            cid: this.$route.params.id,
            sel_cid: this.$route.params.id

            
          }
        })
        .then(response => {
          var list = response.data.list;
          list.forEach((item,i) => {
            this.datatime.push(item.days)
            this.pricelist.push(item.hj_xdje)
         });
         
         this.initChart();
          
        })
        .catch(function(error) {
          window.console.log(error);
        });
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      const option = {
         title: {
            text: '消费统计',
            subtext: '近7日'
        },
        xAxis: {
            type: 'category',
            data: this.datatime
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: this.pricelist,
            type: 'line',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
        }]
    };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
  
};
</script>

<style lang="scss">
@import "../assets/basic.scss";
.inp{
  display: none;
}
.block{
  display: inline-block;
  margin-right:1rem;
}
label{
  display: inline-block;
  width: 49.9%;
  height: 3rem;
  line-height:3rem;
  background: #676b6f;
  font-weight: 600;
  color: #fff;
  text-align: center;
  .lab{
    margin-right: 0.1rem;
  }
}
 input:checked + label {
    background-color: #fb9720;
    color: #fff;
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2 {
    display: block;
}
.bottom{
  position: absolute;
  bottom: 3rem;
  right: 0;
  z-index: 99;
  font-size: 1rem;
  padding: 0 0.5rem;
}
.img{
  width:3rem;
}
.fr{
  float: right;
}


</style>
